<%@page contentType="text/html;charset=utf-8"%>
<%@taglib uri="/struts-tags" prefix="s"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="../css/login.css" rel="stylesheet" type="text/css" />
		<link href="../css/page_bottom.css" rel="stylesheet" type="text/css"/>
		<script type="text/javascript" src="/dangdang_wangxy/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript">
		email = false;
		vickname = false;
		password = false;
		repassword = false;
		vcode = false;
			$(function(){
				//验证邮箱
				$("#txtEmail").blur(function(){
					var pattern=/\b(^['_A-Za-z0-9-]+(\.['_A-Za-z0-9-]+)*@([A-Za-z0-9-])+(\.[A-Za-z0-9-]+)*((\.[A-Za-z0-9]{2,})|(\.[A-Za-z0-9]{2,}\.[A-Za-z0-9]{2,}))$)\b/;
					if(pattern.test($("#txtEmail").val())){
						$("#emailinfosuccess").text("");
						$("#emailinfo").text("");
						/* $("#emailinfosuccess").text("邮箱格式正确！"); */
						$(function(){
							$.ajax({
								type:"post",
								data:{useremail:$("#txtEmail").val()},
								url:"<s:url action='checkUserEmail'/>",
								success:function(result){
									if(result == "f"){
										$("#emailinfo").text("邮箱已存在!");
									}else{
										email = true;
										$("#emailinfosuccess").text("邮箱可用！");
									}
								}
							});
						});
					}else{
						$("#emailinfosuccess").text("");
						$("#emailinfo").text("");
						$("#emailinfo").text("邮箱格式不正确!");
					}
				});
				//验证昵称
				$("#txtNickName").blur(function(){
					var pattern=/^([\u4E00-\u9FA5]{2,10})|[a-z0-9]{4,20}|[\u4E00-\u9FA5]{1,10}[a-z0-9]{2,20}$/;
					if(pattern.test($("#txtNickName").val())){
						vickname = true;
						$("#nameinfosuccess").text("");
						$("#nameinfo").text("");
						$("#nameinfosuccess").text("昵称可用!");
						
					}else{
						$("#nameinfosuccess").text("");
						$("#nameinfo").text("");
						 $("#nameinfo").text("昵称格式不对！");
					}
				});
				//验证密码
				$("#txtPassword").blur(function(){
					var pattern=/^[a-z0-9A-Z]{6,20}$/;
					if(pattern.test($("#txtPassword").val())){
						password = true;
						$("#passwordinfo").text("");
					}else{
						$("#passwordinfo").text("");
						$("#passwordinfo").text("密码格式错误！");
					}
				});
				//验证两次输入密码是否一致
				$("#txtRepeatPass").blur(function(){
					if($("#txtPassword").val()== $("#txtRepeatPass").val()){
						repassword = true;
						$("#password1info").text("");
						$("#password1info2").text("");
						$("#password1info2").text("密码校验通过");
					}else{
						$("#password1info").text("");
						$("#password1info2").text("");
						$("#password1info").text("密码输入不一致！");
					}
				});
				//校验验证码
				$("#txtVerifyCode").blur(function(){
					$.ajax({
						type:"post",
						data:{code:$("#txtVerifyCode").val()},
						url:"<s:url action='checkVcode'/>",
						success:function(result){
							if(result == "t"){
								vcode = true;
								$("#numberinfo").text("");
								$("#numberinfo1").text("");
								$("#numberinfo1").text("验证码通过！");
							}else if((result == "f")){
								$("#numberinfo").text("");
								$("#numberinfo1").text("");
								$("#numberinfo").text("验证码输入错误！");
							}
					}
		});
	});
		//所有验证条件均通过，提交表单
			$("#btnClientRegister").click(function(){
				if(email && vickname && password && repassword && vcode){
					$("form").submit();
				}
			});
});
		</script>
	</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action='<s:url action="userRegiste" namespace="user"/>' id="f">
				<h2>
					以下均为必填项
				</h2>
				<table class="tab_login" >
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="user.useremail" type="text" id="txtEmail" class="text_input"/>
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
									<span id="emailinfo" style="color:red"></span>
									<span id="emailinfosuccess" style="color:green"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="user.usernickname" type="text" id="txtNickName" class="text_input" />
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="nameinfo" style="color:red"></span>
								<span id="nameinfosuccess" style="color:green"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="user.userpassword" type="password" id="txtPassword"
								class="text_input" />
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="passwordinfo" style="color:red"></span>
								<span id="passwordinfosuccess" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="password1" type="password" id="txtRepeatPass"
								class="text_input"/>
							<div class="text_left" id="repeatPassValidMsg">
							<span id="password1info" style="color:red"></span>
							<span id="password1info2" style="color:green"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src='<s:url action="createCode" namespace="/user"/>' onclick="this.src='createCode?time='+(new Date()).getTime()"/>
							<input name="vcode" type="text" id="txtVerifyCode"
								class="yzm_input"/>
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
									<span id="numberinfo" style="color:red"></span>
									<span id="numberinfo1" style="color:green"></span>
									<a href="javascript:" onclick="document.getElementById('imgVcode').src='createCode?time='+(new Date()).getTime()">看不清楚？换个图片</a>
								</p>
							</div>
						</td>
					</tr>
				</table>
				<div class="login_in">
					<input id="btnClientRegister" class="button_1" type="button" value="注 册"/>
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	</body>
</html>

